<template>
  <div>
    <el-card class="box-card">
      <el-row style="height: 50px" :gutter="10">
        <el-col  :span="7">
          <span>科室ID:<el-input  placeholder="请输入ID查找" @change="search" class="input" v-model="find1" size="mini"/></span>
        </el-col>
        <el-col :span="7">
          科室名称:<el-input  placeholder="请输入用户名称查找" @change="search" v-model="find2" class="input" size="mini"/>
        </el-col>
        <el-col :span="3">
          <el-button size="mini" @click="add" type="primary">新增</el-button>
        </el-col>
      </el-row>
      <el-table
              :data="tableData"
              border
              style="width: 100%">
        <el-table-column
                prop="drugsid"
                label="药品ID"
                width="70">
        </el-table-column>
        <el-table-column
                prop="name"
                label="药品名称"
                width="120">
        </el-table-column>
        <el-table-column
                prop="purchaseprice"
                label="进价"
                width="70">
        </el-table-column>
        <el-table-column
                prop="num"
                label="存量"
                width="70">
        </el-table-column>
        <el-table-column
                prop="introducedate"
                label="引入日期"
                width="160">
        </el-table-column>
        <el-table-column
                prop="productunit"
                label="生产厂商"
                width="300">
        </el-table-column>
        <el-table-column
                prop="productdate"
                label="生产日期"
                width="160">
        </el-table-column>
        <el-table-column
                prop="qualityperiod"
                label="保质期"
                width="160">
        </el-table-column>
        <el-table-column
                prop="supplyunit"
                label="供货单位"
                width="300">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="200">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row)"  type="success" size="small">编辑</el-button>
            <el-button @click="del(scope.row)" type="danger" size="small">删除</el-button>
            <div>
              <el-popover
                      placement="top"
                      width="100"
                      v-model="visible">
                <p>修改库存数量为</p>
                <div style="text-align: right; margin: 0">
                  <el-input  placeholder="请输入数量" v-model="num" size="mini"/>
                  <el-button size="mini" type="primary" @click="setNum(scope.row)">修改</el-button>
                </div>
                <el-button size="mini" type="primary" slot="reference">库存修改</el-button>
              </el-popover>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col offset="6">
          <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="page.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="page.total">
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>

  import { findAll, setNum } from '../../network/drug'
  import { del } from '@/network/drug'
  export default {
    name: 'Drug',
    created() {
      this.findAll()
    },
    methods: {
      add() {
        console.log("添加用户")
        this.$router.push("drugAdd")
      },
      edit(row) {
        window.sessionStorage.setItem("id", row.departId)
        window.sessionStorage.setItem("name", row.name)
        this.$router.push("deptEdit")
      },
      del(row) {
        console.log(row);
        del(row.drugsid).then(res => {
          this.findAll()
        })
      },
      handleSizeChange(val) {
        this.page.pageSize = val
        this.findAll()
      },
      handleCurrentChange(val) {
        this.page.pageNo = val
        this.findAll()
      },
      findAll() {
        findAll(this.page).then(res => {
          console.log(res.data.data)
          this.currentPage4 = res.data.data.current
          this.tableData = res.data.data.records
          this.page.pageNo = res.data.data.current
          this.page.pageSize = res.data.data.size
          this.page.total = res.data.data.total
        })
      },
      search() {
        if (this.find2 !== '') {
          this.find1 = ''
        }
        search(this.find1, this.find2).then(res => {
          console.log(res)
          this.tableData = res.data.data
        })
      },
      setNum(e) {
        console.log(e.drugsid)
        setNum(e.drugsid, this.num).then(res => {
          this.findAll()

        })
      }
    },

    data() {
      return {
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 3,
        tableData: [],
        page: {
          pageNo: 1,
          pageSize: 5,
          total: ''
        },
        find1: '',
        find2: '',
        find3: '',
        num:''
      }
    }
  }
</script>

<style scoped>

</style>
